<!--  -->
<template>
  <div class="basle">
    <ul class="tabs">
      <li
        v-for="(show, index) in shows"
        :key="index"
        @click="changes(index)"
        :class="{ tst: currutIndex === index }"
      >
        {{ show }}
        <span :class="{ spanss: currutIndex === index }"></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currutIndex: 0,
      shows: ['项目管理', '文档管理', '风险监控'],
    }
  },
  created() {},
  methods: {
    changes(index) {
      this.$emit('goDo', (this.currutIndex = index))
    },
  },
  beforeDestroy() {},
}
</script>

<style lang='scss' >
.tst {
  color: #006eff;
}
.basle {
  width: 100%;
  height: 66px;
  background: #fff;
  .tabs {
    height: 66px;
    display: flex;
    align-items: center;
    color: #8C8C8C;
    li{
      line-height: 24px;
      height: 24px;
      margin-left: 50px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
     
      line-height: 24px;
      .spanss {
        margin: 0 auto;
        display: block;
        width: 41px;
        height: 3px;
        background: #006eff;
        position: relative;
        top: 20px;
      }
    }
  }
}
</style>
